<template>
	<div class="system-menu-container layout-pd">

		<el-card shadow="hover" style="border: 0;">
			<div class="text animate-slideIn" v-if="flag">测试</div>
			<button @click="flag = !flag">切换</button>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive, computed } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { QuestionFilled, Filter, ArrowDown } from '@element-plus/icons-vue';
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}
const flag = ref(true)
// 引入组件

// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
	// 原始数据（通常从API获取）
	allData: [],
	// 加载状态
	loading: false,
	// 分页参数
	pagination: {
		pageNum: 1,    // 当前页码
		pageSize: 10,  // 每页条数
		total: 0       // 总条数
	},
	searchForm: {
		keyword: '',
		state: '',
		star: ''
	}
});
const date = ref('');
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const allChecked = ref(false)
const reveseChecked = ref(false)

const options1 = [
	{
		value: '1',
		label: '已跟进',
	},
	{
		value: '2',
		label: '已完成',
	},
	{
		value: '3',
		label: '已拒决',
	},
	{
		value: '4',
		label: '未开始',
	},
	{
		value: '5',
		label: '已取消',
	},
];
const options2 = [
	{
		value: '1',
		label: '一星级',
	},
	{
		value: '2',
		label: '二星级',
	},
	{
		value: '3',
		label: '三星级',
	},
	{
		value: '4',
		label: '四星级',
	},
	{
		value: '5',
		label: '五星级',
	},
];
const options3 = [
	{
		value: '1',
		label: '电商用户',
	},
	{
		value: '2',
		label: '物流用户',
	},
	{
		value: '3',
		label: '商品用户',
	},
	{
		value: '4',
		label: '政府用户',
	},
	{
		value: '5',
		label: '房地产用户',
	},
];
// 模拟数据
const mockData = Array.from({ length: 100 }, (_, i) => ({
	id: i + 1,
	customer: `客户${i + 1}`,
	state: i % 2,
	star: (i % 5) + 1,
	firstName: `联系人${i + 1}`,
	phone: `138${Math.floor(10000000 + Math.random() * 90000000)}`,
	date: `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
}));


// 打开新增菜单弹窗;
const onOpenAddMenu = (type: string) => {
	menuDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: RouteRecordRaw) => {
	menuDialogRef.value.openDialog(type, row);
};
// 计算属性：过滤后的数据（支持搜索）
const filteredData = computed(() => {
	let result = [...state.allData];

	// 关键字搜索
	// if (state.searchForm.keyword) {
	// 	const keyword = state.searchForm.keyword.toLowerCase();
	// 	result = result.filter(item =>
	// 		item.customer.toLowerCase().includes(keyword) ||
	// 		item.firstName.toLowerCase().includes(keyword)
	// 	);
	// }

	// // 状态筛选
	// if (state.searchForm.state !== '') {
	// 	result = result.filter(item => item.state == state.searchForm.state);
	// }

	// // 星级筛选
	// if (state.searchForm.star !== '') {
	// 	result = result.filter(item => item.star == state.searchForm.star);
	// }

	return result;
});

// 计算属性：当前页数据
const paginatedData = computed(() => {
	const start = (state.pagination.pageNum - 1) * state.pagination.pageSize;
	const end = start + state.pagination.pageSize;
	return filteredData.value.slice(start, end);
});

// 计算属性：总条数（用于分页）
const total = computed(() => filteredData.value.length);

// 获取数据
const fetchData = async () => {
	state.loading = true;
	try {
		// 这里应该是API调用，我们用模拟数据代替
		state.allData = mockData;
		state.pagination.total = mockData.length;
	} finally {
		state.loading = false;
	}
};

// 页码改变
const handlePageChange = (page) => {
	state.pagination.pageNum = page;
};

// 每页条数改变
const handleSizeChange = (size) => {
	state.pagination.pageSize = size;
	state.pagination.pageNum = 1; // 重置到第一页
};

// 搜索
const handleSearch = () => {
	state.pagination.pageNum = 1; // 搜索后重置到第一页
	state.pagination.total = filteredData.value.length;

	// state.searchForm.keyword
	// tate.searchForm.state
	// state.searchForm.star
	state.allData = state.allData.filter(item => {
		if (state.searchForm.keyword) {
			const keyword = state.searchForm.keyword.toLowerCase();
			return item.customer.toLowerCase().includes(keyword) ||
				item.firstName.toLowerCase().includes(keyword);
		}
		if (state.searchForm.state !== '') {
			return item.state == state.searchForm.state;
		}
		if (state.searchForm.star !== '') {
			return item.star == state.searchForm.star;
		}
		// return true;
	})


};

// 重置搜索
const resetSearch = () => {
	state.searchForm = {
		keyword: '',
		state: '',
		star: ''
	};
	// handleSearch();
	fetchData();

};

// 页面加载时
onMounted(() => {
	fetchData();
});
</script>
<style lang="scss" scoped>
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}

}
@keyframes slideIn {
	0%{
		transform: translateX(-200px);
	}
	100%{
		transform: translateX(0);
	}
    
}
.animate-slideIn {
	animation: slideIn;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	// animation-delay: 1s;
	// animation-iteration-count: infinite;
	animation-fill-mode: forwards;



}
.animate-fadeIn {
	animation: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	// animation-delay: 1s;
	// animation-iteration-count: infinite;
	animation-fill-mode: forwards;



}
</style>
